<template>
	<view class="logistics-list-page">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<!-- 切换标签：我寄的/我收的 -->
			<view class="tabs">
				<view class="tab-item" :class="{ active: expressType === 1 }" @click="switchType(1)">
					我寄的
				</view>
				<view class="tab-item" :class="{ active: expressType === 2 }" @click="switchType(2)">
					我收的
				</view>
			</view>
		</view>

		<!-- 物流列表 -->
		<view class="logistics-list">
			<view class="logistics-item" v-for="(item, index) in logisticsList" :key="index">
				<!-- 运单号信息 -->
				<view class="waybill-header"  @click="toDetail(item.id)">
					<view class="waybill-info">
						<text class="waybill-type">{{ item.express_name }}</text>
						<text class="waybill-number">{{ item.express_waybill_no || ''}}</text>
					</view>
					<view class="copy-btn" @click.stop="copyWaybillNo(item.express_waybill_no)">
						<uv-icon name="file-text" color="#999" size="18"></uv-icon>
					</view>
				</view>

				<!-- 物流信息 -->
				<view class="logistics-detail"  @click="toDetail(item.id)">
					<view class="address-section">
						<view class="address-item">
							<text class="city">{{ item.send_city }}</text>
							<text class="name">{{ item.send_name }}</text>
						</view>

						<view class="status-section">
							<view class="arrow-line">
								<view class="line"></view>
								<uv-icon name="arrow-rightward" color="#fe6600" size="24"></uv-icon>
								<view class="line"></view>
							</view>
							<text class="status" :class="item.status">{{ getStatusText(item.status) }}</text>
						</view>

						<view class="address-item">
							<text class="city">{{ item.receipt_city }}</text>
							<text class="name">{{ item.receipt_name }}</text>
						</view>
					</view>
				</view>

				<!-- 底部信息 -->
				<view class="item-footer">
					<text class="sign-time" v-if="item.trackDate">签收时间：{{ item.trackDate }}</text>
					<text class="price" v-if="item.price">¥{{ item.price }}</text>
				</view>

				<!-- 操作按钮 -->
				<view class="operation-buttons">
					<uv-button text="取消订单" size="mini" shape="circle" @click.stop="openCancelModal"
						v-if="expressType == 1 && item.status == 'create'"></uv-button>
					<uv-button text="删除" size="mini" shape="circle" @click.stop="openDelModal"
						v-if="expressType == 1 && item.status == 'success' || item.status == 'cancel'"></uv-button>
					<uv-modal ref="cancelModal" title="取消订单提醒" content='确定要取消这条订单信息？' :showCancelButton="true"
						@confirm="cancelConfirm(item.id)"></uv-modal>
					<uv-modal ref="delModal" title="删除提醒" content='确定要删除这条物流信息吗？' :showCancelButton="true"
						@confirm="delConfirm(item.id)"></uv-modal>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<uv-empty icon="empty" text="暂无物流信息" v-if="logisticsList.length === 0 && !isLoading"></uv-empty>

		<!-- 加载中 -->
		<uv-loading-page v-if="isLoading"></uv-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 搜索值
				searchValue: '',
				// 物流类型：1-我寄的，2-我收的
				expressType: 1,
				// 列表数据
				logisticsList: [],
				// 分页参数
				page: 1,
				pageSize: 10,
				total: 0,
				// 加载状态
				isLoading: false,
				loadStatus: 'loadmore',
				loadingText: '加载更多',
				// 计数
				sendCount: 0,
				receiveCount: 0
			};
		},
		onLoad() {
			// 页面加载时获取数据
			this.getLogisticsList(true);
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getLogisticsList(true);
		},
		onReachBottom() {
			this.page++;
		},
		methods: {
			// 返回上一页
			navigateBack() {
				uni.navigateBack();
			},

			// 切换物流类型
			switchType(type) {
				if (this.expressType === type) return;
				this.expressType = type;
				// 重置分页，重新加载数据
				this.resetPagination();
				this.getLogisticsList(true);
			},

			// 搜索
			handleSearch() {
				// 重置分页，重新加载数据
				this.resetPagination();
				this.getLogisticsList(true);
			},

			// 重置分页参数
			resetPagination() {
				this.page = 1;
				this.logisticsList = [];
				this.loadStatus = 'loadmore';
			},

			// 跳转详情页
			toDetail(id) {
				this.$wanlshop.to('/pages/express/detail?id=' + id);
			},

			// 获取物流列表
			async getLogisticsList(isRefresh = false) {
				if (this.isLoading) return;

				this.isLoading = true;
				if (!isRefresh) {
					this.loadStatus = 'loading';
					this.loadingText = '加载中...';
				}

				try {
					// 构造请求参数
					const params = {
						page: this.page,
						pageSize: this.pageSize,
						express_type: this.expressType
					};

					// 如果有搜索值，添加到参数中
					if (this.searchValue.trim()) {
						params.express_waybill_no = this.searchValue.trim();
					}

					// 调用接口
					let that = this;
					await uni.request({
						url: '/wanlshop/express/getUserExpressList',
						data: params,
						method: 'POST',
						success(res) {
							that.logisticsList = res.data;
						}
					})

				} catch (error) {
					console.error('获取物流列表失败:', error);
					// this.$u.toast('网络异常，请稍后重试');
				} finally {
					this.isLoading = false;
				}
			},

			// 加载更多
			loadMore() {
				if (this.logisticsList.length >= this.total) {
					this.loadStatus = 'nomore';
					this.loadingText = '已经到底了';
					return;
				}

				this.page++;
				this.getLogisticsList();
			},

			// 复制运单号
			copyWaybillNo(waybillNo) {
				let that = this;
				uni.setClipboardData({
					data: waybillNo,
					success: () => {
						that.$wanlshop.msg('运单号已复制');
					}
				});
			},

			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'create': '已创建',
					'start': '运输中',
					'success': '已签收',
					'cancel': '已取消'
				};
				return statusMap[status] || '未知状态';
			},

			openCancelModal() {
				this.$refs.cancelModal[0].open();
			},
			// 取消物流信息
			cancelConfirm(id) {
				uni.$uv.http.post('/wanlshop.express/cancelOrder', {
					order_id: id
				}).then(res => {
					if (res.res.code == 1) {
						this.$wanlshop.msg('取消成功！', 1500, true, 'success')
						// 重新加载数据
						this.resetPagination();
						this.getLogisticsList(true);
					} else {
						this.$wanlshop.msg(res.res.msg || '取消失败', 2000, true)
					}
				}).catch(error => {
					this.$wanlshop.msg('取消失败，请稍后重试', 2000, true)
				});
			},

			openDelModal() {
				this.$refs.delModal[0].open();
			},
			// 删除物流信息
			delConfirm(id) {
				uni.$uv.http.post('/wanlshop.express/delOrder', {
					order_id: id
				}).then(res => {
					if (res.res.code == 1) {
						this.$wanlshop.msg('删除成功！', 1500, true, 'success')
						// 重新加载数据
						this.resetPagination();
						this.getLogisticsList(true);
					} else {
						this.$wanlshop.msg(res.res.msg || '删除失败', 2000, true)
					}
				}).catch(error => {
					this.$wanlshop.msg('删除失败，请稍后重试', 2000, true);
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.logistics-list-page {
		padding-bottom: 20rpx;
		background-color: #f8f9fa;
		min-height: 100vh;

		.navbar {
			background-color: #fff;
			padding: 20rpx 32rpx;
			position: sticky;
			top: 0;
			z-index: 999;
			border-bottom: 1rpx solid #f0f0f0;

			.tabs {
				display: flex;
				height: 80rpx;
				background: #f5f5f5;
				border-radius: 16rpx;
				padding: 4rpx;
				position: relative;

				.tab-item {
					flex: 1;
					text-align: center;
					font-size: 30rpx;
					color: #666;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 12rpx;
					transition: all 0.3s ease;
					z-index: 1;
					position: relative;

					&.active {
						color: #fff;
						font-weight: 500;
						background: #fe6600;
						box-shadow: 0 4rpx 12rpx rgba(254, 102, 0, 0.3);
					}
				}
			}
		}

		.logistics-list {
			padding: 24rpx;

			.logistics-item {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 32rpx;
				margin-bottom: 24rpx;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
				transition: all 0.3s ease;
				border: 1rpx solid #f0f0f0;

				&:active {
					transform: translateY(2rpx);
					box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
				}

				.waybill-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 32rpx;
					padding-bottom: 24rpx;
					border-bottom: 1rpx solid #f8f8f8;

					.waybill-info {
						display: flex;
						align-items: center;
						flex: 1;

						.waybill-type {
							font-size: 28rpx;
							color: #fe6600;
							font-weight: 500;
							margin-right: 16rpx;
						}

						.waybill-number {
							font-size: 26rpx;
							color: #333;
							font-weight: 500;
						}
					}

					.copy-btn {
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 12rpx;
						background: #f8f8f8;
						transition: all 0.3s ease;

						&:active {
							background: #f0f0f0;
						}
					}
				}

				.logistics-detail {
					margin-bottom: 24rpx;

					.address-section {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.address-item {
							flex: 1;
							display: flex;
							flex-direction: column;
							align-items: center;

							.city {
								font-size: 32rpx;
								font-weight: 600;
								color: #333;
								margin-bottom: 8rpx;
							}

							.name {
								font-size: 26rpx;
								color: #666;
							}
						}

						.status-section {
							display: flex;
							flex-direction: column;
							align-items: center;
							margin: 0 32rpx;

							.arrow-line {
								display: flex;
								align-items: center;
								margin-bottom: 12rpx;

								.line {
									width: 40rpx;
									height: 2rpx;
									background: #e8e8e8;
								}
							}

							.status {
								font-size: 24rpx;
								padding: 6rpx 16rpx;
								border-radius: 20rpx;
								font-weight: 500;

								&.create {
									background: #fff0e6;
									color: #fe6600;
								}

								&.start {
									background: #e6f7ff;
									color: #1890ff;
								}

								&.success {
									background: #f6ffed;
									color: #52c41a;
								}

								&.cancel {
									background: #f5f5f5;
									color: #999;
								}
							}
						}
					}
				}

				.item-footer {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-top: 20rpx;
					border-top: 1rpx dashed #f0f0f0;

					.sign-time {
						font-size: 24rpx;
						color: #999;
					}

					.price {
						font-size: 32rpx;
						color: #fe6600;
						font-weight: 600;
					}
				}

				.operation-buttons {
					display: flex;
					justify-content: flex-end;
					padding-top: 24rpx;
					margin-top: 20rpx;
					border-top: 1rpx solid #f8f8f8;

					::v-deep .uv-button {
						margin-left: 16rpx;

						&[text="取消订单"] {
							background: #fff;
							color: #fe6600;
							border: 1rpx solid #fe6600;
						}

						&[text="删除"] {
							background: #fff;
							color: #999;
							border: 1rpx solid #e8e8e8;
						}
					}
				}
			}
		}
	}
</style>